<template>
  <div id="funnel"></div>
</template>
<script>
import { getFunnel } from "@/api/orderApi";
export default {
  mounted() {
    getFunnel().then((res) => {
      if (res.code == 0) {
        let myChart = this.$echarts.init(document.getElementById("funnel"));
        let option = {
          title: {
            text: "销售统计",
            subtext: "只计算已出售的",
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c}元",
          },
          toolbox: {
            feature: {
              dataView: { readOnly: false },
              restore: {},
              saveAsImage: {},
            },
          },
          legend: {
            data: res.data.map((item) => item.name),
          },

          series: [
            {
              name: "漏斗图",
              type: "funnel",
              left: "10%",
              top: 60,
              //x2: 80,
              bottom: 60,
              width: "80%",
              // height: {totalHeight} - y - y2,
              min: 0,
              max: 100,
              minSize: "0%",
              maxSize: "100%",
              sort: "descending",
              gap: 2,
              label: {
                show: true,
                position: "inside",
              },
              labelLine: {
                length: 10,
                lineStyle: {
                  width: 1,
                  type: "solid",
                },
              },
              itemStyle: {
                borderColor: "#fff",
                borderWidth: 1,
              },
              emphasis: {
                label: {
                  fontSize: 20,
                },
              },
              data: res.data,
            },
          ],
        };
        myChart.setOption(option);
      }
    });
  },
};
</script>
<style lang="scss" scoped>
#funnel {
  margin-top: 2%;
  width: 85%;
  height: 650px;
}
</style>